<!--
 * @Author: yanjikun
 * @Date: 2022-04-22 11:03:38
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-04-25 15:10:02
 * @Description: file content
-->
<template>
  <template v-for="(actionItem, _index) in actionFilters" :key="`${_index}-${actionItem.label}`">
    <Button type="link" v-bind="formatActionItem(actionItem)">{{ actionItem.label }}</Button>
  </template>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue'
import { ActionItem, ModalConfirm } from '../types/tableAction'
import { Button, ButtonProps, Modal } from 'ant-design-vue'
defineOptions({
  name: 'TableAction'
})
const props = defineProps({
  actions: {
    type: Array as PropType<ActionItem[]>,
    default: () => []
  }
})
const defaultConfirmConfig: ModalConfirm = {
  content: '提示'
}
const formatActionItem = (actionItem: ActionItem) => {
  if (actionItem.modalConfirm) {
    actionItem.onClick = () => {
      Modal.confirm({
        ...defaultConfirmConfig,
        ...actionItem.modalConfirm
      })
    }
  }
  return { ...actionItem, size: 'small' } as ButtonProps
}
const actionFilters = computed(() => {
  return props.actions.filter((item) => !item.hidden)
})
</script>

<style scoped lang="less"></style>
